<template>
	<div class="chat-container">
		<div class="message-box" :style="{ height: currentHeight + 'px' }" @click="toggleHeight">123</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				currentHeight: 100,
				targetHeight: 200,
				
				
				isAnimating: false
			};
		},
		methods: {
			toggleHeight() {
				if (this.isAnimating) return;

				this.targetHeight = this.currentHeight === 100 ? 200 : 100;
				this.animateHeight();
			},
			animateHeight() {
				this.isAnimating = true;
				const start = performance.now();
				const duration = 500;

				const step = timestamp => {
					const progress = Math.min((timestamp - start) / duration, 1);
					this.currentHeight = this.currentHeight + (this.targetHeight - this.currentHeight) * progress;

					if (progress < 1) {
						requestAnimationFrame(step);
					} else {
						this.isAnimating = false;
					}
				};

				requestAnimationFrame(step);
			}
		}
	};
</script>

<style>
	.message-box{
		background-color: red;
	}
</style>